import {PlusOutlined} from '@ant-design/icons'
import {
    Row,
    Col,
    Flex,
    Typography,
    Button,
    Form,
    Input,
    Select,
    Table,
    Switch,
    Drawer,
    Modal,
    Divider,
    Radio,
    message
} from 'antd'
import React, {useEffect, useState} from 'react'
import {adminActivatyList} from '../service/activaty'
import {
    timedMsgAddAPI,
    timedMsgDelAPI,
    timedMsgEditAPI,
    timedMsgListAPI
} from '../service/message'

export default function TouchTimedMsg() {
    const [form] = Form.useForm()
    // 模态框
    const [modalOpen, setModalOpen] = useState(false)
    // 是否有选中活动
    const [selectedActive, setSelectedActive] = useState()
    const [isOpen, setIsOpen] = useState(false)
    // 列表
    const [coupleList, setCoupleList] = useState([])
    // 活动列表
    const [activeList, setActiveList] = useState([])
    // 活动名称
    const [tmpActiveName, setTmpActiveName] = useState('请选择')
    const [activeName, setActiveName] = useState('请选择')
    // 活动id
    const [tmpActiveId, setTmpActiveId] = useState('')
    const [activeId, setActiveId] = useState('')
    const [id, setId] = useState('')
    // 分页
    const [page, setPage] = useState(1)
    const [n, setN] = useState(1)
    const [m, setM] = useState(0)
    useEffect(() => {
        // 活动列表
        ;(async () => {
            const res = await adminActivatyList({pageNo: 1, pageSize: 100})
            console.log(res)
            if (res.data) {
                setActiveList(res.data.objects)
            }
        })()
    }, [])
    useEffect(() => {
        // 消息
        ;(async () => {
            const res = await timedMsgListAPI({pageNo: page, pageSize: 10})
            console.log(res)
            setCoupleList(res.data)
        })()
    }, [page, n, m])

    //判断抽屉的打开状态
    useEffect(() => {
        if (!isOpen) {
            setActiveName('请选择')
        }
    }, [isOpen])
    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={3}>信息管理</Typography.Title>
                        <Button
                            type="primary"
                            icon={<PlusOutlined/>}
                            onClick={() => setIsOpen(true)}
                        >
                            新建定时消息
                        </Button>
                    </Flex>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Form layout="inline">
                        <Form.Item label="模板名称" name="storeName">
                            <Input style={{width: 200}}/>
                        </Form.Item>
                        <Form.Item label="模板状态" initialValue={'0'}>
                            <Select
                                style={{width: 200}}
                                placeholder="请选择模板状态"
                                options={[
                                    {
                                        value: '',
                                        label: '全部'
                                    },
                                    {
                                        value: '0',
                                        label: '启用'
                                    },
                                    {
                                        value: '1',
                                        label: '停用'
                                    }
                                ]}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="default" htmlType="reset">
                                重置
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Typography.Paragraph style={{fontSize: 16}}>
                        定时列表
                    </Typography.Paragraph>
                </Col>
                <Col span={24}>
                    <Table
                        rowKey="id"
                        pagination={{pageSize: 10, onChange: (page) => setPage(page)}}
                        dataSource={coupleList}
                        columns={[
                            {
                                title: '序号',
                                dataIndex: 'id',
                                key: 'id'
                            },
                            {
                                title: '模板名称',
                                dataIndex: 'tempName',
                                key: 'tempName'
                            },
                            {
                                title: '消息标题',
                                dataIndex: 'msgTitle',
                                key: 'msgTitle'
                            },
                            {
                                title: '营销活动',
                                dataIndex: 'activityName',
                                key: 'activityName'
                            },
                            {
                                title: '创建时间',
                                dataIndex: 'createAt',
                                key: 'createAt'
                            },
                            {
                                title: '启用状态',
                                dataIndex: 'status',
                                key: 'status',
                                render: (_, record) => (
                                    <Switch
                                        defaultChecked={record.status}
                                        onChange={async (checked) => {
                                            if (checked) {
                                                await timedMsgEditAPI({id: record.id, status: 1})
                                                setN(n + 1)
                                                // message.success('启用成功')
                                            } else {
                                                await timedMsgEditAPI({id: record.id, status: 0})
                                                setM(m + 1)
                                                // message.success('停用成功')
                                            }
                                        }}
                                    />
                                )
                            },
                            {
                                title: '操作',
                                key: 'action',
                                render: (_, record) => (
                                    <span className="op">
                    <a
                        onClick={() => {
                            setIsOpen(true)
                            form.setFieldsValue(record)
                            setId(record.id)
                            setActiveId(record.activityId)
                            setActiveName(record.activityName)
                            // 通过活动id获取活动名称
                            for (let i = 0; i < activeList.length; i++) {
                                if (activeList[i].id === record.activityId) {
                                    setActiveName(activeList[i].activityName)
                                    setActiveId(activeList[i].id)
                                    console.log(
                                        activeList[i].activityName,
                                        activeList[i].id
                                    )
                                }
                            }
                        }}
                        style={{marginRight: 10}}
                    >
                      编辑
                    </a>
                    <a
                        onClick={async () => {
                            const res = await timedMsgDelAPI(record.id)
                            console.log(res)
                            setN(n + 1)
                            message.success('删除成功')
                        }}
                    >
                      删除
                    </a>
                  </span>
                                )
                            }
                        ]}
                    />
                </Col>
            </Row>
            {/* 右侧抽屉 */}
            <Drawer
                title="新建定时模板"
                onClose={() => {
                    setIsOpen(false)
                    setId('')
                    setN(n + 1)
                }}
                open={isOpen}
                width={500}
                maskClosable={false}
                destroyOnClose
            >
                <Form
                    layout="vertical"
                    form={form}
                    preserve={false}
                    onFinish={async (values) => {
                        values.activityId = activeId
                        console.log(values)
                        if (!id) {
                            // 如果是添加
                            const res = await timedMsgAddAPI(values)
                            console.log(res)
                            setM(m + 1)
                            message.success('添加成功')
                        } else {
                            // 否则是编辑
                            const res = await timedMsgEditAPI({...values, id})
                            console.log(res)
                            setM(m + 1)
                            message.success('编辑成功')
                        }
                        setId()
                        setIsOpen(false)
                    }}
                >
                    <Form.Item
                        label="模板名称"
                        name="tempName"
                        rules={[{required: true, message: '请输入模板名称'}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="消息标题"
                        name="msgTitle"
                        rules={[{required: true, message: '请输入消息标题'}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="消息内容"
                        name="content"
                        rules={[{required: true, message: '请输入消息内容'}]}
                    >
                        <Input.TextArea maxLength={500} style={{height: 100}} showCount/>
                    </Form.Item>
                    <Form.Item label="营销活动">
                        <Select
                            placeholder={'请选择'}
                            value={activeName}
                            onClick={() => setModalOpen(true)}
                        />
                    </Form.Item>
                    <Form.Item label="启用状态" name="status" initialValue={1}>
                        <Radio.Group>
                            <Radio value={1}>启用</Radio>
                            <Radio value={0}>禁用</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item style={{textAlign: 'right'}}>
                        <Button htmlType="reset" style={{marginRight: 10}}>
                            重置
                        </Button>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            {/* 选择营销活动 */}
            <Modal
                title="选择活动"
                open={modalOpen}
                width={1000}
                onCancel={() => setModalOpen(false)}
                destroyOnClose
                maskClosable={false}
                onOk={() => {
                    setModalOpen(false)
                    setActiveId(tmpActiveId)
                    setActiveName(tmpActiveName)
                }}
            >
                <Divider/>
                <Row>
                    <Col span={24}>
                        <Form onFinish={() => {
                        }} layout="inline">
                            <Form.Item name="couponName" label="活动名称">
                                <Input placeholder="请输入活动名称"/>
                            </Form.Item>
                            <Form.Item name="couponName" label="活动类型">
                                <Select placeholder="请选择活动类型" style={{width: 200}}/>
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
                <Row style={{marginTop: 20}}>
                    <Col span={24}>
                        <Table
                            rowKey="id"
                            rowSelection={{
                                type: 'radio',
                                onChange: (selectedRowKeys, selectedRows) => {
                                    console.log(selectedRowKeys, selectedRows)
                                    setTmpActiveName(selectedRows[0].activityName)
                                    // 保存活动id
                                    setTmpActiveId(selectedRows[0].id)
                                }
                            }}
                            columns={[
                                {key: 'id', title: '序号', dataIndex: 'id'},
                                {
                                    key: 'activityName',
                                    title: '活动名称',
                                    dataIndex: 'activityName'
                                },
                                {
                                    key: 'activityTarget',
                                    title: '活动目标',
                                    dataIndex: 'activityTarget'
                                },
                                {
                                    key: 'activityType',
                                    title: '活动类型',
                                    dataIndex: 'activityType',
                                    render: (_, record) => (
                                        <>
                                            {record.activityType === 1 && '全部'}
                                            {record.activityType === 2 && '赠领'}
                                            {record.activityType === 3 && '拼团'}
                                            {record.activityType === 4 && '抽奖'}
                                            {record.activityType === 5 && '砍一刀'}
                                        </>
                                    )
                                },
                                {
                                    key: 'channelType',
                                    title: '推广渠道',
                                    dataIndex: 'channelType',
                                    render: (_, record) => (
                                        <>
                                            {record.channelType === 1 && 'APP'}
                                            {record.channelType === 2 && '小程序'}
                                        </>
                                    )
                                },
                                {
                                    key: 'endDate',
                                    title: '活动时间',
                                    dataIndex: 'endDate',
                                    render: (_, record) => (
                                        <>
                                            {record.startDate.substring(0, 10)} -{' '}
                                            {record.endDate.substring(0, 10)}
                                        </>
                                    )
                                }
                            ]}
                            dataSource={activeList}
                        />
                    </Col>
                </Row>
            </Modal>
        </>
    )
}
